<template>
	<div id="index">
		<div id="logo"><img src="../../assets/common/logo.png" alt="logo" /></div>
		<div id="content" @mousewheel="winScroll">
			<section id="carousel">
				<el-carousel :height="winHeight + 'px'" :interval="5000">
					<el-carousel-item v-for="item of carousel" :key="item"><img :src="item" alt="资源加载失败" /></el-carousel-item>
				</el-carousel>
			</section>
			<section id="products" class="container">
				<div class="con-title">
					<p>产品</p>
					<p>Products</p>
				</div>
				<div id="category">
					<a v-for="(item, index) of categoryLists" :key="index" :href="'/ItemList.html?category_id=' + item.primaryId">{{ item.primaryName }}</a>
				</div>
				<ul class="product-lists">
					<li v-for="(item, index) of productLists" :key="index" :class="{[`animated fadeInUp delay-${index*100}ms`]: beginAni[1]}">
						<a :href="'/detail.html?item_id=' + item.goods_id">
							<img class="product-img" :src="item.goods_img" />
							<div class="product-info">
								<p class="title">{{ item.goods_name }}</p>
								<p class="subtitle">{{ item.english_name }}</p>
							</div>
						</a>
					</li>
				</ul>
			</section>
			<section id="brand" class="container">
				<div class="con-title">
					<p>品牌</p>
					<p>Brand</p>
				</div>
				<div class="brand-content">
					<ul class="brand-lists">
						<li v-for="(item, index) of brandLists" :key="index" :class="{[`animated fadeInUp delay-${index*300}ms`]: beginAni[2]}">
							<a href="javascript:;">
								<img :src="item.service_img" />
								<h2>{{ item.service_title }}</h2>
								<p>{{ item.service_info }}</p>
								<div class="more">
									<span>
										MORE
										<i class="iconfont iconmore"></i>
										<i class="iconfont iconmore"></i>
									</span>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</section>
			<section id="about" class="container">
				<div class="about-content">
					<div class="about-img"><img src="../../assets/common/about_bg.jpg" /></div>
					<div class="about-info">
						<div class="con-title">
							<p>关于</p>
							<p>ABOUT US</p>
						</div>
						<p class="about-text" :class="{[`animated fadeInUp delay-300ms`]: beginAni[3]}">
							“好奇生长，始终陪伴”
							hamuoo品牌伴随孩子成长的珍贵时光一同发展，我们不断以创新化的观念设计启蒙儿童生活美学，为深具国际消费理念的中国都市家庭。提供全龄儿童美学空间的家居产品与定制服务...
						</p>
						<div class="more-wrap" :class="{[`animated fadeInUp delay-600ms`]: beginAni[3]}">
							<a href="/about" class="more">
								MORE
								<i class="iconfont iconmore"></i>
							</a>
							<div class="border"></div>
							<div class="border"></div>
							<div class="border"></div>
							<div class="border"></div>
						</div>
					</div>
				</div>
			</section>
			<section id="news" class="container">
				<div class="con-title">
					<p>资讯</p>
					<p>NEWS</p>
				</div>
				<div class="last-news">
					<div class="news-img"><img src="../../assets/carousel/carousel_1.jpg" /></div>
					<div class="news-wrapper" v-if="newsLists.length!=0">
						<a href="javascript:;" :data-id="newsLists[0].id">
							<div class="newsbody">
								<p class="date">
									<span class="md">{{getMD(newsLists[0].time)}}</span>
									<span class="year">{{getYear(newsLists[0].time)}}</span>
								</p>
								<div class="news-text">
									<p class="title">{{ newsLists[0].title }}</p>
									<p class="description">{{ newsLists[0].text }}</p>
								</div>
							</div>
						</a>
					</div>
					<div class="more-wrap">
						<a href="/news" class="more">
							MORE
							<i class="iconfont iconmore"></i>
						</a>
					</div>
				</div>
				<ul class="news-lists">
					<li v-for="(item, index) of newsLists.slice(1)" :key="index">
						<div class="news-wrapper">
							<a href="javascript:;" :data-id="item.id">
								<div class="newsbody">
									<p class="date">
										<span class="md">{{getMD(item.time)}}</span>
										<span class="year">{{getYear(item.time)}}</span>
									</p>
									<div class="news-text">
										<p class="title">{{ item.title }}</p>
										<p class="description">{{ item.text }}</p>
									</div>
								</div>
							</a>
						</div>
					</li>
				</ul>
			</section>
			<section id="contact" class="container">
				<div class="con-title">
					<p>联系我们</p>
					<p>CONTACT</p>
				</div>
				<div class="contact-content">
					<div class="contact-left" :class="{[`animated fadeInLeft delay-300ms`]: beginAni[5]}">
						<div class="ct-info">
							<p class="ellipsis add">
								<span>地点：</span>
								中国·北京朝阳区 管庄路光和空间C302
							</p>
							<p class="ellipsis zip">
								<span>邮编：</span>
								100000
							</p>
							<p class="ellipsis tel">
								<span>电话：</span>
								400-813-1018 / 010-85377841
							</p>
							<p class="ellipsis fax">
								<span>传真：</span>
								010-85377841
							</p>
							<p class="ellipsis email">
								<span>邮箱：</span>
								info@hamuoo.com
							</p>
						</div>
						<div class="share-box">
							<a href="javascript:;"><i class="iconfont iconweibo"></i></a>
							<a href="javascript:;"><i class="iconfont iconicon4"></i></a>
							<a
								href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=funwood.endlessline.cn&sharesource=qzone&title=趣木家具&pics=http://funwood.endlessline.cn/img/about_bg.727ff7eb.jpg&summary=趣木家具"
							>
								<i class="iconfont iconqq"></i>
							</a>
						</div>
					</div>
					<div class="contact-right" :class="{[`animated fadeInRight delay-300ms`]: beginAni[5]}">
						<form id="ct-form">
							<input type="text" name="name" placeholder="名字" autocomplete="off" />
							<input type="text" name="email" placeholder="邮箱" autocomplete="off" />
							<input type="text" name="tel" placeholder="电话" autocomplete="off" />
							<textarea name="content" placeholder="内容" autocomplete="off" cols="30" rows="10"></textarea>
							<button id="sub-contact" type="button" @click.prevent="postContactInfo">提交</button>
						</form>
						<el-dialog title="提示" :visible.sync="dialogVisible" width="25%" top="20vh" :modal="false">
							<span>{{ logContent }}</span>
							<span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
						</el-dialog>
					</div>
				</div>
			</section>
			<Footer></Footer>
		</div>
		<div id="section-ctrl">
			<div v-for="(item, index) of sectionLists" :class="{ active: current == index }" :key="index" @click="switchSection(index)">
				<span>{{ item }}</span>
			</div>
		</div>
		<Navigation></Navigation>
	</div>
</template>

<script>
import Footer from '../../components/Footer.vue';
import Navigation from '../../components/Navigation.vue';
import { somoothMove} from '../../utils/js/utils.js';
import http from '../../utils/js/http.js';
import data from '../../utils/js/data.js';
export default {
	name: 'index',
	data() {
		return {
			carousel: [require('../../assets/carousel/carousel_1.jpg'), require('../../assets/carousel/carousel_2.jpg'), require('../../assets/carousel/carousel_3.jpg')],
			timer: null,
			current: 0,
			beginAni:[false,false,false,false,false,false],
			winHeight: document.documentElement.offsetHeight,
			dialogVisible: false,
			logContent: '',
			sectionLists: ['', '产品', '品牌', '关于', '资讯', '联系我们'],
			// categoryLists: data.categoryLists,
			productLists: data.productLists,
			brandLists: data.brandLists
			// newsLists: data.newsLists
		};
	},
	components: {
		Footer,
		Navigation
	},
	methods: {
		getYear(time){
			return time.match(/^\d{4}/)[0];
		},
		getMD (time){
			return time.match(/(?<=-)\d{2}[-]\d{2}/)[0];
		},
		scrollTo() {
			let con = document.querySelector('#content');
			let pos = this.current * this.winHeight;
			somoothMove(10, pos, con);
			if(!this.beginAni[this.current]){
				this.beginAni[this.current]=true;
			}
		},
		winScroll(event) {
			if (this.timer) {
				clearTimeout(this.timer);
			}
			this.timer = setTimeout(() => {
				if (event.wheelDelta > 100) {
					this.current > 0 && this.current--;
				} else if (event.wheelDelta < -100) {
					this.current < 5 && this.current++;
				}
				this.scrollTo();
			}, 600);
		},
		switchSection(index) {
			if (this.current != index) {
				this.current = index;
				this.scrollTo();
			}
		},
		checkForms(forms) {
			if (forms.name.value && forms.email.value && forms.tel.value && forms.content.value) {
				let reg1 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				let reg2 = /^1[3456789]\d{9}$/;
				if (!reg1.test(forms.email.value)) {
					this.logContent = '请输入正确的邮箱';
					this.dialogVisible = true;
				} else if (!reg2.test(forms.tel.value)) {
					this.logContent = '请输入正确的手机号';
					this.dialogVisible = true;
				} else {
					return true;
				}
			}
			return false;
		},
		getProductLists() {
			http({
				method: 'get',
				url: '/getGoods',
				params: {
					category_id: 1
				}
			})
				.then(res => {
					if (!res.data.err) {
						console.log(res.data);
						this.productLists = res.data;
					} else {
						console.log('获取商品失败');
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		postContactInfo() {
			let forms = document.forms['ct-form'];
			if (this.checkForms(forms)) {
				http({
					method: 'post',
					url: '/contactInfo',
					data: {
						name: forms.name.value,
						email: forms.email.value,
						tel: forms.tel.value,
						content: forms.content.value
					}
				})
					.then(res => {
						if (!res.data.err) {
							this.logContent = '提交成功';
							this.dialogVisible = true;
						} else {
							this.logContent = '服务器挂掉了';
							this.dialogVisible = true;
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	},
	created() {
		let that = this;
		window.onload = window.onresize = function() {
			that.winHeight = document.documentElement.offsetHeight;
		};
		// this.getProductLists();
	},
	mounted() {
		this.$store.dispatch('index/getCategoryLists');
		this.$store.dispatch('index/getNewsLists');
	},
	computed: {
		categoryLists: {
			get() {
				return this.$store.state.index.categoryLists;
			},
			set() {}
		},
		newsLists: {
			get() {
				return this.$store.state.index.newsLists;
			},
			set() {}
		}
	}
};
</script>

<style lang="less">
@import '../../utils/css/animate.css';
@import '../../theme/style.less';

#index {
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	position: relative;
}
#logo {
	position: fixed;
	height: 18px;
	margin: 30px;
	z-index: 99;
	img {
		height: 100%;
	}
}
#content {
	height: 100%;
	width: 100%;
	overflow-y: hidden;
	position: absolute;
	&::-webkit-scrollbar {
		display: none;
	}
}
.container {
	height: 100%;
	width: 100%;
	position: relative;
	padding: 0 30px;
	box-sizing: border-box;
}

.el-carousel__item img {
	width: 100%;
}
#carousel {
	.el-carousel__arrow {
		height: 60px;
		width: 60px;
		border-radius: 5px;
		background: none;
		i {
			font-size: 28px;
			font-weight: bold;
		}
	}
	.el-carousel__arrow:hover {
		background: rgba(0, 0, 0, 0.6);
	}
}
.con-title {
	display: inline-block;
	margin-top: 120px;
	padding-bottom: 50px;
	p:first-child {
		font-family: 'HELVETICANEUELTPRO-THEX', '微软雅黑';
		color: #444444;
		font-size: 22px;
	}
	p:last-child {
		color: #c1c1c1;
		font-family: 'HELVETICANEUELTPRO-THEX', '微软雅黑';
		margin-top: 5px;
		font-size: 14px;
	}
}

#products {
	#category {
		position: relative;
		top: 140px;
		float: right;
		a {
			line-height: 16px;
			height: 16px;
			display: inline-block;
			transition: all 0.3s ease-out 0s;
			padding: 7px 0px;
			margin-left: 60px;
			font-size: 14px;
			color: #999999;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0;
				height: 1px;
				background-color: #b2b2b2;
				transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			}
			&::after {
				position: absolute;
				content: '/';
				text-align: left;
				margin-left: 30px;
				font-size: 12px;
				color: #c8c8c8;
			}
			&:hover {
				color: #666666;
				&::before {
					width: 100%;
				}
			}
		}
	}
	.product-lists {
		overflow: hidden;
		clear: both;
		li {
			width: 25%;
			position: relative;
			float: left;
			overflow: hidden;
			a {
				display: block;
				line-height: 0;
			}
			&:hover {
				.product-img {
					transform: scale(1.2);
				}
				.product-info {
					opacity: 1;
				}
			}
		}
		.product-img {
			width: 100%;
			transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		}
		.product-info {
			opacity: 0;
			transition: all ease-out 0.3s;
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			p {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				font-family: 'HELVETICANEUELTPRO-THEX', '微软雅黑';

				&:first-child {
					color: #fff;
					font-size: 16px;
					line-height: 16px;
					margin-bottom: 5px;
				}
				&:last-child {
					color: #bfbfbf;
					font-size: 14px;
					line-height: 14px;
				}
			}
		}
	}
}
#brand {
	.brand-content {
		margin: 0 90px;
	}
	.brand-lists {
		display: flex;
		justify-content: space-between;
		li {
			transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			height: 530px;
			width: 362px;
			&:hover {
				padding-top: 30px;
				.more {
					span {
						margin-left: 0;
					}
				}
			}
			img {
				width: 342px;
				height: auto;
				margin: 0 auto;
				padding: 0 10px;
			}
			h2 {
				margin-top: 25px;
				font-size: 18px;
				color: #333;
				margin-bottom: 30px;
				text-align: center;
			}
			p {
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				line-height: 28px;
				padding: 0 25px;
				color: #848484;
				font-size: 13px;
			}
			.more {
				width: 60px;
				margin: 0 auto;
				margin-top: 25px;
				overflow: hidden;
				span {
					transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
					display: block;
					width: 120px;
					margin-left: -60px;
					font-size: 14px;
					color: #666666;
					font-family: 'HELVETICANEUELTPRO-THEX';
				}
				i {
					display: inline-block;
				}
				i:last-child {
					margin-left: 25px;
					color: #999999;
				}
			}
		}
	}
}
#about {
	.con-title {
		margin-top: 0;
	}
	.about-content {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.about-img {
		width: 50%;
		img {
			width: 100%;
		}
	}
	.about-info {
		width: 50%;
		box-sizing: border-box;
		padding: 0 80px;
	}
	.more-wrap{
		.more{
			background-color: #383838;
			color: #fff;
		}
		&:hover {
			.border {
				width: 100%;
				height: 100%;
			}
			.more {
				background: #ffffff;
				color: #333;
			}
		}
	}
	.border {
		box-sizing: border-box;
		position: absolute;
		background: none;
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		&:nth-of-type(1) {
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border-top: 1px solid #383838;
		}
		&:nth-of-type(2) {
			top: 0;
			right: 0;
			width: 0;
			height: 0;
			border-right: 1px solid #383838;
		}
		&:nth-of-type(3) {
			bottom: 0;
			right: 0;
			width: 0;
			height: 0;
			border-bottom: 1px solid #383838;
		}
		&:nth-of-type(4) {
			bottom: 0;
			left: 0;
			width: 0;
			height: 0;
			border-left: 1px solid #000000;
		}
	}
	.about-text {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-height: 26px;
		font-size: 13px;
		color: #848484;
	}
}
#about,
#news {
	.more-wrap {
		margin-top: 50px;
		display: inline-block;
		position: relative;
	}
	.more {
		width: 146px;
		line-height: 40px;
		height: 40px;
		text-align: center;
		text-indent: 0px;
		display: block;
		font-family: 'HELVETICANEUELTPRO-THEX';	
		font-size: 16px;
	}
}
#news {
	.more-wrap {
		margin-left: 20px;
		.more{
			background:linear-gradient(#383838 0%, #383838 100%) no-repeat 0% 0% ~'/' 0% 100%;
			color: #383838;
			transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		}
	}
	.last-news {
		display: inline-block;
		width: 440px;
		margin-top: 120px;
		vertical-align: top;
		margin-left: 120px;
		cursor: pointer;
		&:hover {
			.more{
				background:linear-gradient(#383838 0%, #383838 100%) no-repeat 0% 0% ~'/' 100% 100%;
				color: #ffffff;
			}
		}
		.news-img {
			width: 100%;
			height: 230px;
			overflow: hidden;
			img {
				width: 100%;
			}
		}
		.news-wrapper {
			margin-top: 30px;
			margin-left: -100px;
			width: 530px;
		}
	}
	.date {
		display: inline-block;
		width: 80px;
		position: relative;
		span:first-child {
			font-size: 26px;
			color: #8c8c8c;
			font-family: 'HELVETICANEUELTPRO-THEX';
			&::after {
				position: absolute;
				content: '';
				right: -20px;
				top: 20%;
				height: 60%;
				width: 1px;
				background: #8c8c8c;
			}
		}
		span:last-child {
			position: absolute;
			text-align: right;
			box-sizing: border-box;
			top: 36px;
			right: 10px;
			font-size: 14px;
			color: #c0c0c0;
		}
	}
	.news-lists {
		display: inline-block;
		margin-top: 120px;
		float: right;
		margin-right: 110px;
		li {
			margin-bottom: 50px;
			&:hover{
				.news-text{
					padding-left: 20px;
				}
			}
		}
	}
	.news-text{
		width: 340px;
		box-sizing: border-box;
		display: inline-block;
		margin-left: 40px;
		vertical-align: top;
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
	.title {
		width: 320px;
		font-size: 16px;
		color: #7b7b7b;
		height: 30px;
		line-height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: top;
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
	.description {
		width: 320px;
		font-size: 13px;
		line-height: 26px;
		color: #6a6a6a;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 12px;
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	}
}
#contact {
	.contact-content {
		height: 350px;
		width: calc(100% + 60px);
		background: #383838;
		left: -30px;
		bottom: 36px;
		position: absolute;
	}
	.contact-left {
		display: inline-block;
		width: 35%;
		margin-top: 5%;
		margin-left: 7%;
		.ct-info {
			margin-bottom: 45px;
		}
		p {
			line-height: 28px;
			font-size: 13px;
			color: #989898;
			height: 28px;
			width: 100%;
		}
	}
	.contact-right {
		float: right;
		width: 48%;
		margin-top: 5%;
		margin-right: 7%;
		display: inline-block;
	}
}
.share-box {
	a {
		display: inline-block;
		height: 30px;
		width: 30px;
		margin-right: 15px;
		border-radius: 30px;
		line-height: 30px;
		text-align: center;
		transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
		&:hover {
			background: rgba(86, 86, 86, 0.6);
			i {
				color: #ffffff;
			}
		}
		i {
			color: #b1b1b1;
			font-size: 20px;
		}
	}
}
.ellipsis {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: block;
}
#ct-form {
	input,
	textarea {
		background: transparent;
		border-bottom: 1px solid #606060;
		color: #ffffff;
	}
	input {
		width: 30%;
		padding-bottom: 15px;
		margin-right: 5%;
		&:last-of-type {
			margin-right: 0;
		}
	}
	textarea {
		width: 100%;
		height: 120px !important;
		margin-top: 30px;
		display: block;
		resize: none;
	}
}
#sub-contact {
	color: #cfcfcf;
	font-size: 15px;
	display: block;
	height: 40px;
	width: 140px;
	margin-top: 30px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	&:hover {
		background: #ffffff;
		color: #000000;
	}
}
.footer {
	top: -36px;
}
#section-ctrl {
	position: fixed;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	& > div {
		height: 12px;
		width: 12px;
		border-radius: 12px;
		margin-bottom: 30px;
		position: relative;
		z-index: 9;
		transition: all 0.3s ease-out 0s;
		background: transparent;
		border: 2px solid rgba(0, 0, 0, 0);
		&:hover {
			border: 2px solid #5a5a5a;
			background: rgba(255, 255, 255, 0.8);
			&::before {
				background: transparent;
			}
			span {
				display: block;
			}
		}
		&::before {
			content: '';
			position: absolute;
			height: 3px;
			width: 3px;
			border-radius: 3px;
			top: 5px;
			left: 5px;
			background: #a8a8a8;
		}
		&:not(:last-child)::after {
			content: '';
			position: absolute;
			top: 15px;
			left: 6px;
			height: 30px;
			width: 1px;
			background: rgba(155, 155, 155, 0.2);
		}
		& > span {
			width: 70px;
			height: 24px;
			position: absolute;
			top: -4px;
			text-indent: initial;
			color: #959595;
			overflow: hidden;
			font-size: 12px;
			line-height: 24px;
			right: 0;
			text-align: right;
			padding-right: 25px;
			display: none;
		}
	}
	.active {
		border: 2px solid #5a5a5a;
		span {
			display: block;
		}
		&::before {
			background: transparent;
		}
	}
}
</style>
